/**
 * Created by Yun on 2015-10-24.
 */

import React from 'react';
import { Menu, Icon } from 'antd';
import { browserHistory } from 'react-router';

const {SubMenu, Item} = Menu;

import {SiteLayout} from '../components/themes/default';

export default class Site extends React.Component{
  static propTypes = {
    children: React.PropTypes.oneOfType([
      React.PropTypes.arrayOf(React.PropTypes.node),
      React.PropTypes.node,
    ]),
  };
  onMenuClicked = ev => {
    const url = ev.item.href || ev.keyPath.map(v=>`/${v}`).reverse().join('');
    browserHistory.push(url);
  };
  renderMenu(){
    const { routes } = this.props;
    const open = routes.map(v=>v.key || v.path).filter(v=>v);
    const selected = open.pop();
    return (
      <Menu mode="inline" theme="light" onClick={this.onMenuClicked} defaultSelectedKeys={[selected]} defaultOpenKeys={open}>
        <Item key="home">首页</Item>
        <SubMenu key="user" title={<span><Icon type="user" />用户管理</span>}>
          <Item key="list">用户列表</Item>
        </SubMenu>
        <SubMenu key="good" title={<span><Icon type="shopping-cart" />商品管理</span>}>
          <Item key="list">商品列表</Item>
        </SubMenu>
        <SubMenu key="drawout" title={<span><Icon type="setting"/>提现</span>}>
          <Item key="list">提现记录</Item>
        </SubMenu>
        <SubMenu key="acc" title={<span><Icon type="github" />管理员</span>}>
          <Item key="list">管理员列表</Item>
          <Item key="role">角色列表</Item>
        </SubMenu>
      </Menu>
    );
  }
  render() {
    const {children} = this.props;
    return (
      <SiteLayout
        menu={this.renderMenu()}
      >
        {children}
      </SiteLayout>
    );
  }
}
